<template>
  <div>
    <el-drawer
      @update:visible="updateVisible"
      :visible="visible"
      direction="rtl"
      :wrapperClosable="false"
      size="60%">
      <el-table
        :data="mapping"
        class="main"
        highlight-current-row
        fit
        height="calc(100vh - 150px)"
      >
        <el-table-column label="字段名称" show-overflow-tooltip width="200">
          <template v-slot:default="scope">
            <span v-model="scope.row.COLUMN_NAME">{{ scope.row.COLUMN_NAME }}</span>
          </template>
        </el-table-column>
        <el-table-column label="字段类型" width="150">
          <template v-slot:default="scope">
            <span>{{ scope.row.COLUMN_TYPE }}</span>
          </template>
        </el-table-column>
        <el-table-column label="注释" show-overflow-tooltip max-width="200">
          <template v-slot:default="scope">
            <div v-if="scope.row.COLUMN_COMMENT">
              {{ scope.row.COLUMN_COMMENT }}
            </div>
            <div v-else> -</div>
          </template>
        </el-table-column>
        <el-table-column label="字段关联" width="150" show-overflow-tooltip>
          <template v-slot:default="scope">
            <div class="" v-if="scope.row.FAKER || scope.row.VALUE">
              不关联
            </div>
            <div class="" v-else-if="scope.row.contactTable">
              关联其他表字段
            </div>
            <div class="" v-else-if="scope.row.copyCurrentField">
              关联当前表字段
            </div>
            <div class="" v-else-if="scope.row.fileName">
              关联文件
            </div>
            <div v-else> -</div>
          </template>
        </el-table-column>
        <el-table-column label="字段生成规则" min-width="150" :show-overflow-tooltip='true'>
          <template v-slot:default="scope">
            <div class="rule" v-if="scope.row.FAKER">
              <!--            <span v-if="scope.row.VALUE">【</span>-->
              <span>{{ scope.row.FAKER ? valueToLabel(1, scope.row.FAKER[0], scope.row.FAKER[1]) : "" }}</span>
              <!--            <span v-if="scope.row.VALUE">】</span>-->
              <!--            {{ scope.row.VALUE ? valueToLabel(2, scope.row.VALUE, "") : "" }}-->
            </div>
            <div class="rule" v-else-if="scope.row.VALUE">
              <span>{{ scope.row.VALUE }}</span>
            </div>
            <div class="rule" v-else-if="scope.row.contactTable">
              <span>{{ scope.row.contactTable }}/{{ scope.row.contactColumn }}</span>
            </div>
            <div class="rule" v-else-if="scope.row.copyCurrentField">
              <span>{{ scope.row.copyCurrentField }}</span>
            </div>
            <div class="rule" v-else-if="scope.row.fileName">
              <span>{{ scope.row.fileName }}</span>
            </div>
            <div v-else> -</div>
          </template>
        </el-table-column>
        <el-table-column label="参数值" min-width="150" show-overflow-tooltip>
          <template v-slot:default="scope">
            {{ scope.row.VALUE }}
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "mappingDetail",
  props: ['visible', 'mapping', 'ruleOptions', 'reList'],
  methods: {
    /*更新对话框状态*/
    updateVisible(val) {
      this.$emit('update:visible', val)
    },

    /*列表显示 value转为 label*/
    valueToLabel(status, value) {
      if (status === 1) {
        for (const valueElement of this.ruleOptions) {
          if (valueElement.value === value) {
            return valueElement.label
          }
        }
      } else {
        for (const valueElement of this.reList) {
          if (valueElement.value === value) {
            value = valueElement.label
          }
        }
        return value
      }
    },

    /*列表表头显示注释*/
    renderHeader(h, {column, $index}) {
      return h('span', [
        h('span', '默认值|re表达式'),
        h('el-tooltip', {props: {effect: 'dark', placement: 'top'}}, [
          h('div', {
              slot: 'content',
              attrs: {style: 'font-size: 14px; width: 500px; word-wrap:break-word;white-space: pre-line; line-height: 14px;'}
            },
            '1.未选择生成规则时，数据按默认值生成\n\n' +
            '2.字段不能为null时，必须选择生成规则或输入默认值\n\n' +
            '3.选择生成规则（正则表达式时），选择建议的re表达式或手动输入re表达式\n\n' +
            '4.选择生成规则（级联选择器只有一级）时，数据按生成规则生成\n\n' +
            '5.选择生成规则（级联选择器有二级）时，二级是String，默认值就输入字符串'),
          h('i', {class: 'el-icon-info', style: 'color:#409EFF;'})
        ])
      ])
    },

  }
}
</script>

<style scoped>
.main {
  padding: 0 20px;
}

.rule {
  color: #0044f0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
